/*
 *  Copyright 2022 Collate.
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *  http://www.apache.org/licenses/LICENSE-2.0
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

// Position
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.sticky {
  position: sticky;
}

// Align
.align-start {
  align-items: start;
}
.items-center {
  align-items: center;
}
.item-start {
  align-items: flex-start;
}

// Display
.d-flex {
  display: flex;
}
//flex class will be removed once all the element using this class change to d-flex
.flex {
  display: flex;
}
.d-inline-flex {
  display: inline-flex;
}
.inline {
  display: inline;
}
.inline-flex {
  display: inline-flex;
}
.d-inline-block {
  display: inline-block;
}
.d-block {
  display: block;
}
.d-none {
  display: none;
}

.d-grid {
  display: grid;
}
.flex-1 {
  flex: 1;
}

.inset-0 {
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

//top
.top-0 {
  top: 0px;
}
.top-1 {
  top: 4px;
}
.top-6 {
  top: 24px;
}

//right
.right-1 {
  right: 4px;
}
.right-3 {
  right: 12px;
}

//bottom
.bottom-full {
  bottom: 100%;
}

.gap-1 {
  gap: 4px;
}
.gap-2 {
  gap: 8px;
}
.gap-3 {
  gap: 12px;
}
.gap-4 {
  gap: 16px;
}

// Alignment Items
.align-middle {
  vertical-align: middle;
}
.self-end {
  align-self: flex-end;
}
.vertical-align-inherit {
  vertical-align: inherit;
}

.self-center {
  align-self: center;
}

.self-start {
  align-self: flex-start;
}

.flex-none {
  flex: none;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-row {
  flex-direction: row;
}

// Justify Items
.justify-center {
  justify-content: center;
}
.justify-self-end {
  justify-self: end;
}
.justify-end {
  justify-content: flex-end;
}
.justify-between {
  justify-content: space-between;
}

.justify-start {
  justify-content: start;
}

//  Flex Direction
.flex-col {
  flex-direction: column;
}
.flex-initial {
  flex: 0 1 auto;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.flex-grow {
  flex-grow: 1;
}
.flex-shrink {
  flex-shrink: 0;
}

.flex-auto {
  flex: 1 1 auto;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

// Float
.float-right {
  float: right;
}

// Vertical Align
.vertical-baseline {
  vertical-align: baseline;
}
